<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable size="small" style="width: 240px"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="操作人" prop="updater">
        <el-input v-model="queryParams.updater" placeholder="请输入操作人" clearable size="small" style="width: 240px"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
     
      <el-form-item>
        <el-button v-preventReClick type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button v-preventReClick icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="roleList" class="margin-top">
      <el-table-column label="角色名称" prop="name" :show-overflow-tooltip="true"/>
      <el-table-column label="角色编码" prop="code" />
      <el-table-column label="操作人" prop="processor" />
      <el-table-column label="操作时间" align="center" prop="processTime" :formatter="$util.YYMM" />
      <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
          <template v-slot="scope">
            <div>
                     <el-button v-preventReClick size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
                    <span class="spans">|</span>
                    <el-button v-preventReClick size="mini" type="text" @click="handleGrant(scope.row)"
                    v-hasPermi="['system:role:delete']">编辑</el-button>
            </div>
          </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>



    <!-- 对象授权组件 -->
    <usergrantDialog ref="usergrantDialog" title="对象授权" @emitplayer="emitplayer"></usergrantDialog>

    <!-- 查看组件 -->
    <ViewDialog ref="ViewDialog" ></ViewDialog>
  </div>
</template>

<script>

import { roleUsersAndGroups, updateRoleUsersAndGroups } from "@/api/system/userGroup"

import {
  listRole,assignRoleUsers,listRoleUsers
} from "@/api/common/role";
import usergrantDialog from "@/components/common/usergrantDialog/index.vue"
import ViewDialog from "./components/viewObj.vue"


export default {
  components:{
    usergrantDialog, ViewDialog
  },
  name: "SystemRole",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      currow: null,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        type: 3,
        name: undefined,
        updater: undefined
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      listRole(this.queryParams).then(
        response => {
          this.roleList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      ).catch(err => this.loading = false)
    },
    /**查看详情 */
    handleView(row){
      const { id } = row
      this.$refs.ViewDialog.init(id)
    },
    /**对象授权 */
    async handleGrant(row = {}){
      const { data } = await listRoleUsers({roleId:row.id})
      const res = await roleUsersAndGroups({roleId:row.id})
      this.$refs.usergrantDialog.init(row,{list: data.userRoleResDO,listGroup: res.data.roleGroupsRespVoList})
      this.currow = row
    },
    /** 保存对象授权*/
    emitplayer(obj){
      if(!this.currow){
        return this.$message.error('请选择角色')
      }
      const params1 = {
        roleId:this.currow.id,
        orgUserReqs:obj.list
      }
      assignRoleUsers(params1).then(res =>{
        // this.$message.success('授权成功')
      })
      let arr = []
      if(obj.listGroup.length>0){
        obj.listGroup.map(mat=>{
          arr.push(mat.id)
        })
      }
      const params2 = {
        roleId:this.currow.id,
        groupId:arr
      }
      updateRoleUsersAndGroups(params2).then(res =>{
        this.$message.success('保存成功')
         this.getList();
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
